所有工具的出现，都是为了解决特定的问题，那么前端熟悉的webpack是为了解决什么问题呢？

js模块化： 浏览器认识的语言是HTML，CSS，Javascript，而其中css和javascript是通过html的标签link,script引入进来。

随着前端项目的越来越复杂，css和js文件会越来越庞大，那么在开发阶段，就必须要把css和js按功能拆分成几个小文件，方便开发。

那么拆分的小文件如何引入到html中呢？css可以通过link标签或者@importcss语法，但是js因为没有模块导入的语法（ES6有了import，但还不是所有浏览器兼容），就只能通过script标签引入。但是这样的话会导致很多问题：

针对js模块化出现了很多的解决方案，总结来说有几种规范：

工程化： 除了js模块化的问题之外，前端还有很多其他的问题，比如代码混淆，代码压缩，scss，less等css预编译语言的编译，typescript的编译，eslint检验代码规范，如果这些任务都需要手工去执行的话，太繁琐，也容易出错。

模块化 其实webpack的核心就是解决js模块化问题的工具，运行在node环境中，同时可以支持commonjs，es6，amd的模块语法（可以使用：reuire/mocule.exports,import/export,require/define的方式来导入导出模块）。

可以将开发时候拆分为不同文件的js代码，打包成一个js文件。也可以通过配置灵活的拆分js代码，通过 tree shaking 删减没有使用到的代码。

模块化打包时webpack的核心功能，但是它还有两个非常重要的机制loader和plugin。

loader webpack本身只支持js,json文件的模块化打包，但是有开放出loader接口，通过不同的loader可以将其他格式的文件转化为可识别的模块，比如： css-loader可以识别css文件，raw-loader可以直接将文件当作模块，less-loader，sass-loader可以直接识别less，sass文件。

plugin 插件机制是webpack的另一个重要的拓展，webpack在打包的过程中，会暴露出不同的生命周期事件，而插件会监听这些事件，然后做出对应的操作，比如： UglifyJsPlugin可以混淆压缩代码，EslintWebpackPlugin可以执行eslint的代码格式检测和自动修复。

总结： webpack是一个运行在node环境下，对js文件进行模块化打包的工具。通过loader机制可以实现除js格式外的其他格式文件，通过plugin机制可以实现自动执行一些工程化需要的任务。

那么webpack要怎么使用呢？

首先要安装webapck，使用npm（npm基本用法及原理），安装webpack（核心），webpack-cli（命令行工具）:

然后创建以下两个文件：name.js，index.js， 我们以es6的语法导入导出模块，es6模式的模块变量的导出时按引用导出，就是在模块的变量如果在外部被修改，也会作用到模块内部，而commonjs的模式是按值导出，即模块外部的修改，不会影响到模块内部。

然后运行打包命令：

webpack默认从index.js文件开始打包，所以如果开始文件的名称为index，就可以不需要写配置文件，就可以直接打包。 默认打包的模式是‘production'即生产模式，打包成功后，会自动创建dist文件夹，并生成main.js文件：

我们看到打包后的文件把index.js和name.js两个文件合成了一个文件，并对代码进行了混淆压缩（生产模式），这是最基本的webpack最核心的功能 6— 打包。 但是显然，在实际工作中我们不会这么简单的使用，那就需要用的配置文件了，下面是一个比较接近实际工作中的例子。

以下的项目会有几个文件：index.js , utils.js, style.scss, index.html, webpack-config.js。 基本功能就是在index.js文件中引入utils.js文件里的方法并调用。然后用scss语法编写样式，最后把打包的文件加入到已有的index.html文件中。 通过命令：npx webpack serve(可以放入npm脚本配置中，然后运行 npm run xxx)，实现的效果是：

webpack的打包是在node环境下执行的，所以node的语法这里都可以用，最终输出的是一个js对象。 配置可以分成几个部分（参考webpack配置文档）：

打包模式

mode 预置了开发环境和生产环境的一些优化。

devtool 控制是否生成，以及如何生成 source map。有了source map文件的话，如果代码有报错可以映射到打包之前的代码（源代码），可以方便定位错误。 可以有很多的选择，一般来说，在开发环境下选择：eval-cheap-module-source-map，cheap-source-map。生产环境选择：不配置，source-map。

入口、出口

本地服务器 此功能需要安装webpack-dev-server插件npm install --save-dev webpack-dev-server,启动时需要用serve命令npx webpack serve. 启动成功后，会在本地开启一个web服务器，并且有实时更新，热模块替换等功能。 配置项是在devServer中。

loader webpack本是只支持对js文件的打包，但是因为有loader机制，可以通过配置rules实现对其他文件的打包。 示例代码中实现的是对scss/sass文件的打包，同一个relues中的loader的执行顺序是从右到左（逆序），所以顺序不能乱。第一个执行的loader 会将其结果（被转换后的资源）传递给下一个 要执行的loader。

插件plugins webpack在打包的时候，会暴露其生命周期，插件就是在特定的生命周期执行的操作，通过插件的机制，可以实现很多强大的功能。 示例代码中使用了HtmlWebpackPlugin插件，功能是在打包完成后，自动把打包后的代码加入到html文件中。如果没有任何配置，则会自动生成一个html文件，并通过标签把js文件引入进来。

在实际项目中，开发环境和生产环境的配置往往会有很大的区别，所以会有两个配置文件，而这两个配置文件又会有一些公共的配置，所以就会有如下三个配置文件：

然后分别执行npm run dev,npm run build就可以了。

webpack会把所有代码打包成一个文件（包括业务代码，npm包），这样最后的包就会很大，打包效率也很慢，所以可以有时候需要做代码分离。

第三方库分离 有一些第三方库可能会需要独立引入，而不是放在业务代码里面，因为不会改动或者需要cdn服务，比如jquery有免费的cdn服务：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js 。 那这些独立引入的js文件就不需要加入到webpack打包，只需要在externals添加配置就行。

这样的话，虽然index.js里有引入jquery，webpack也不会把jquery打包进来，打包时间会减少，包的体积也会变小。

npm包分离 第三方库除了一些可以用script标签引入的，大多数是通过npm引入的，这一类的js包也会也会合并到最后的app.js总包之中，使得app.js文件会过大，而且如果业务代码有一点改动的话，app.js的包就会全部都变动，导致浏览器就会重新下载app.js文件，使用不了浏览器内置的缓存机制。 我们可以通过配置，让npm里的包与业务代码分开。

这样打包目录下就有三个文件：

一般有变动的就只有app.js文件了。npm引入的js包是否可以再分成几个文件呢？可以的，参看 SplitChunksPlugin文档

业务代码分离 有时候不仅第三方库需要分离，我们自己写的业务代码可能也会很大，也需要分离。要实现业务代码的分离只要添加多个入口就可以了。

这样utils.js文件也从主包app.js中分离了出来，要注意的是app入口加了dependOn:'utils',为了让app.js里面不要重复打包utils.js。

动态加载 有时候不是需要页面一开始的时候，就加载全部的js包，而是等到特定的时机再去加载某些js包，这就需要动态加载了，只需要用到import()就可以了，注意这是import的函数使用方式。

如果运行代码的话，会发现页面一开始进入的时候，并没有引入jquery的包，但是点击按钮的时候，就开始导入了，这就动态加载。 并且发现webpack.config.js并没有做什么特殊的配置，这是因为动态导入的js包webpack会自动给独立为一个js文件。 import()返回的是一个promise对象。

webpack每次打包的时候，都会把涉及到的js包都处理一遍。但是实际上有些js包是不会有改动到的，所以打包过后的文件每次都是一样的，每次都重新打包的话，会加增打包时间。 有一种解决方案是：把不会变动的js包先打包一次，以后每次打包的时候，直接引用就可以了。 先添加一个独立的配置文件 webpack.dll.config.js

执行打包脚本 npx webpack --config webpack.dll.config.js,就会再dll目录下输出文件：jquery_lodash.dll.js,jquery_lodash.manifest.json。 主要用到的插件是：

然后配置项目打包用的webpack.config.js文件：

主要用到的插件是:

然后就可以正常的打包项目了：

执行打包脚本 npx webpack，会自动使用webpack.config.js配置文件打包。会发现打包速度提高了很多。